<template>
  <div class="shiping_container" v-loading="domLoading2">
    <div class="shiping_container_nav">
      <div class="shiping_container_nav_inside">
        <div
          class="shiping_container_nav_text"
          :class="{
            shiping_container_nav_text_active: item.id == activeChangeItem,
          }"
          v-for="item in shipingNav"
          :key="item.id"
          @click="changeItem(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div v-if="activeChangeItem == 1">
      <div class="shiping_container_tags">
        <div class="shiping_container_tags_left">
          <div class="shiping_container_tags_left_select" @click="isShow">
            <span>{{ tagsArrayName }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <transition name="el-fade-in">
            <div class="shiping_container_tags_left_tags" v-show="show">
              <div class="shiping_container_tags_left_tags_title">全部视频</div>
              <div class="shiping_container_tags_left_tags_contact">
                <div class="shiping_container_tags_left_tags_childContact">
                  <span
                    :class="{
                      shiping_container_tags_left_tags_childContact_inside_active:
                        index == activeTagsIndex,
                    }"
                    class="shiping_container_tags_left_tags_childContact_inside"
                    v-for="(item, index) in allVideoGroupListTag"
                    :key="item.id"
                    @click="changeTags(index, item.name, item.id)"
                  >
                    {{ item.name }}
                  </span>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <div class="shiping_container_tags_right">
          <div
            :class="{
              shiping_container_tags_right_tag_active: index == activeTagsIndex,
            }"
            class="shiping_container_tags_right_tag"
            v-for="(item, index) in videoGroupListTag"
            :key="item.id"
            @click="changeTags(index, item.name, item.id)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="no_videoGroupLists" v-if="videoGroupLists.length == 0">
        <div class="no_videoGroupLists_img">
          <img src="../../../assets/noData.png" />
        </div>
        <div style="font-size: 20px">暂无数据</div>
      </div>
      <div v-else>
        <div class="shiping_container_contact" v-loading="domLoading">
          <div
            class="shiping_container_contact_inside"
            v-for="(item, index) in videoGroupLists"
            :key="index"
            @click="jumpShiPing(item.vid)"
          >
            <div class="shiping_container_contact_inside_img">
              <el-image lazy :src="item.coverUrl"></el-image>
              <span class="shiping_container_contact_inside_durationms">{{
                times(item.durationms)
              }}</span>
            </div>
            <div class="shiping_container_contact_inside_title">
              {{ item.title }}
            </div>
            <div class="shiping_container_contact_inside_arc">
              <span
                v-for="(childItem, index) in item.creator"
                :key="childItem.userId"
              >
                {{
                  (index == item.creator.length - 1 && childItem.userName) ||
                  childItem.userName + "/"
                }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="mv_container">
        <shiPingComponents
          name="最新MV"
          :mvDomLoading="mvDomLoading"
          :areaInfoList="areaInfoList"
          @jumpMV="jumpMV"
        >
          <div class="mv_container_newMv_head_right">
            <span
              @click="changeMvId(item.id, item.name)"
              :class="{
                mv_container_newMv_head_right_span_active:
                  item.id == activeMvTags,
              }"
              class="mv_container_newMv_head_right_span"
              v-for="item in area"
              :key="item.id"
              >{{ item.name }}</span
            >
          </div>
        </shiPingComponents>
        <shiPingComponents
          name="网易出品"
          :areaInfoList="WYNewMv"
          @jumpMV="jumpMV"
        />
        <div class="mv_container_paiHang">
          <div class="mv_container_paiHang_head">
            <div class="mv_container_paiHang_head_left">
              <span>MV排行榜</span>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="mv_container_paiHang_head_right">
              <span
                @click="changePaiHangId(item.id, item.name)"
                :class="{
                  mv_container_paiHang_head_right_span_active:
                    item.id == activePaiHangTags,
                }"
                class="mv_container_paiHang_head_right_span"
                v-for="item in area"
                :key="item.id"
                >{{ item.name }}</span
              >
            </div>
          </div>
          <div
            class="mv_container_paiHang_contact"
            v-loading="paiHangdomLoading"
          >
            <div
              class="mv_container_paiHang_contact_inside"
              @click="jumpMV(item.id)"
              v-for="(item, index) in topMvList"
              :key="item.id"
              :class="
                index % 2 === 0
                  ? 'mv_container_paiHang_contact_inside_two'
                  : 'mv_container_paiHang_contact_inside_one'
              "
            >
              <div class="mv_container_paiHang_contact_inside_left">
                {{ item.lastRank &lt; 10 ? "0" + item.lastRank : item.lastRank }}
              </div>
              <div class="mv_container_paiHang_contact_inside_middle">
                <el-image :src="item.cover"></el-image>
                <div
                  class="hot_number"
                  :style="{
                    left:
                      item.playCount.toString().length < 5 ? '145px' : '135px',
                  }"
                >
                  <i class="el-icon-thumb"></i>
                  <span>
                    {{ item.playCount }}
                  </span>
                </div>
              </div>
              <div class="mv_container_paiHang_contact_inside_right">
                <div class="mv_container_paiHang_contact_inside_right_title">
                  {{ item.name }}
                </div>
                <div class="mv_container_paiHang_contact_inside_right_art">
                  {{ item.artistName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const shiPingComponents = () =>
  import("../../../components/shiPingComponents.vue");
import {
  videoGroupList,
  relatedAllvideo,
  mvFirst,
  exclusiveRcmd,
  topMV,
} from "../../../api/index";
export default {
  components: {
    shiPingComponents,
  },
  created() {
    console.log(history.length);
    this.domLoading2 = true;
    videoGroupList().then((res) => {
      this.allVideoGroupListTag = res.data;
      this.videoGroupListTag = res.data.slice(0, 9);
      this.tagsArrayName = this.videoGroupListTag[0].name;
      relatedAllvideo({ id: this.videoGroupListTag[0].id }).then((res) => {
        this.videoGroupLists = res.data;
        console.log(this.videoGroupLists);
        this.domLoading2 = false;
      });
    });
    mvFirst(this.areaInfo).then((res) => {
      this.areaInfoList = res.data;
    });
    exclusiveRcmd({ limit: 6 }).then((res) => {
      this.WYNewMv = res.data.slice(0, 6);
    });
    this.topMVApi("内地");
  },
  data() {
    return {
      area: [
        {
          id: 1,
          name: "内地",
        },
        {
          id: 2,
          name: "港台",
        },
        {
          id: 3,
          name: "欧美",
        },
        {
          id: 4,
          name: "日本",
        },
        {
          id: 5,
          name: "韩国",
        },
      ],
      shipingNav: [
        {
          name: "视频",
          id: 1,
        },
        {
          name: "MV",
          id: 2,
        },
      ],
      areaInfo: {
        area: "内地",
        limit: 6,
      },
      topMvList: [],
      WYNewMv: [],
      areaInfoList: [],
      allVideoGroupListTag: [],
      videoGroupLists: [],
      videoGroupListTag: [],
      activeChangeItem: 1,
      activeTagsIndex: 0,
      activeMvTags: 1,
      activePaiHangTags: 1,
      tagsArrayName: "",
      domLoading: false,
      domLoading2: false,
      mvDomLoading: false,
      show: false,
      paiHangdomLoading: false,
    };
  },
  methods: {
    jumpMV(id) {
      const status = 1;
      this.$router.push({
        path: "/video",
        query: {
          id,
          status,
        },
      });
    },
    jumpShiPing(id) {
      const status = 2;
      this.$router.push({
        path: "/video",
        query: {
          id,
          status,
        },
      });
    },
    topMVApi(area) {
      topMV({ area }).then((res) => {
        this.topMvList = res.data
          .sort(this.ArraySort("lastRank"))
          .filter((item) => {
            return item.lastRank > 0;
          })
          .slice(0, 10);
        this.paiHangdomLoading = false;
      });
    },
    ArraySort(property) {
      return (a, b) => {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    changePaiHangId(id, name) {
      this.paiHangdomLoading = true;
      this.activePaiHangTags = id;
      this.topMVApi(name);
    },
    changeMvId(id, name) {
      this.mvDomLoading = true;
      this.activeMvTags = id;
      this.areaInfo.area = name;
      mvFirst(this.areaInfo).then((res) => {
        this.areaInfoList = res.data;
        this.mvDomLoading = false;
      });
    },
    isShow() {
      this.show = !this.show;
    },
    times(time) {
      const hour =
        parseInt(time / 3600) < 10
          ? "0" + parseInt(time / 3600)
          : parseInt(time / 3600);
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return hour + ":" + min + ":" + sec;
    },
    changeItem(id) {
      this.activeChangeItem = id;
    },
    changeTags(index, name, id) {
      this.show = false;
      this.domLoading = true;
      this.tagsArrayName = name;
      this.activeTagsIndex = index;
      relatedAllvideo({ id }).then((res) => {
        this.videoGroupLists = res.data;
        this.domLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.shiping_container {
  width: 95%;
  .shiping_container_nav {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    margin-top: 10px;
    //background: orchid;
    .shiping_container_nav_inside {
      display: flex;
      justify-content: space-between;
      width: 115px;
      height: 100%;
      .shiping_container_nav_text {
        font-size: 17px;
        height: 100%;
        width: 40px;
        @include flex;
        cursor: pointer;
      }
      .shiping_container_nav_text_active {
        font-size: 19px;
        font-weight: 800;
        border-bottom: 4px solid $wangYiYunColor;
        cursor: default;
      }
    }
  }
  .shiping_container_tags {
    width: 100%;
    height: 60px;
    //background: yellow;
    display: flex;
    justify-content: space-between;
    .shiping_container_tags_left {
      height: 100%;
      display: flex;
      align-items: center;
      .shiping_container_tags_left_select {
        width: 100px;
        height: 35px;
        border-radius: 50px;
        border: 1px solid rgb(221, 218, 218);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
      }
      .shiping_container_tags_left_tags {
        width: 500px;
        position: absolute;
        z-index: 2;
        background: white;
        box-shadow: 0px 0px 10px #c5c0c0;
        top: 180px;
        .shiping_container_tags_left_tags_title {
          width: 96%;
          height: 50px;
          border-bottom: 1px solid rgb(196, 194, 194);
          display: flex;
          align-items: center;
          font-size: 14px;
          padding-left: 20px;
          margin-bottom: 10px;
        }
        .shiping_container_tags_left_tags_contact {
          width: 100%;
          display: flex;
          justify-content: center;
          overflow-y: auto;
          .shiping_container_tags_left_tags_childContact {
            height: 350px;
            width: 95%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .shiping_container_tags_left_tags_childContact_inside {
              margin-bottom: 10px;
              width: 70px;
              height: 30px;
              border-radius: 40%;
              font-size: 12px;
              @include flex;
              cursor: pointer;
            }
            .shiping_container_tags_left_tags_childContact_inside_active {
              background: #fcf9f9;
              color: $wangYiYunColor;
              cursor: default;
            }
          }
        }
      }
      .shiping_container_tags_left_select:hover {
        background: rgb(230, 229, 229);
      }
    }
    .shiping_container_tags_right {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      //background: green;
      .shiping_container_tags_right_tag {
        font-size: 12px;
        color: #777373;
        cursor: pointer;
      }
      .shiping_container_tags_right_tag_active {
        color: $wangYiYunColor;
        cursor: default;
      }
    }
  }
  .no_videoGroupLists {
    width: 100%;
    height: 400px;
    @include flex;
    flex-direction: column;
    .no_videoGroupLists_img {
      @include flex;
      margin-bottom: 10px;
    }
  }
  .shiping_container_contact {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .shiping_container_contact_inside {
      width: 30%;
      height: 200px;
      margin-right: 25px;
      cursor: pointer;
      margin-bottom: 20px;
      .shiping_container_contact_inside_img {
        width: 100%;
        height: 70%;
        //background: red;
        margin-bottom: 10px;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .shiping_container_contact_inside_durationms {
          position: relative;
          bottom: 22px;
          left: 175px;
          color: white;
          width: 50px;
          @include flex;
        }
      }
      .shiping_container_contact_inside_title {
        @include white_space;
        margin-bottom: 5px;
        font-size: 15px;
      }
      .shiping_container_contact_inside_arc {
        color: #aca8a8;
        font-size: 14px;
      }
    }
  }
  .mv_container {
    width: 100%;
    .mv_container_newMv_head_right {
      width: 380px;
      display: flex;
      justify-content: space-around;
      .mv_container_newMv_head_right_span {
        font-size: 14px;
        color: #909399;
        width: 40px;
        height: 25px;
        @include flex;
        border-radius: 100px;
        cursor: pointer;
      }
      .mv_container_newMv_head_right_span_active {
        color: $wangYiYunColor;
        background: #fcf9f9;
        cursor: default;
      }
    }
    .mv_container_paiHang {
      width: 100%;
      margin-bottom: 20px;
      .mv_container_paiHang_head {
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .mv_container_paiHang_head_left {
          font-weight: 800;
          font-size: 19px;
        }
        .mv_container_paiHang_head_right {
          width: 380px;
          display: flex;
          justify-content: space-around;
        }
        .mv_container_paiHang_head_right_span {
          font-size: 14px;
          color: #909399;
          width: 40px;
          height: 25px;
          @include flex;
          border-radius: 100px;
          cursor: pointer;
        }
        .mv_container_paiHang_head_right_span_active {
          color: $wangYiYunColor;
          background: rgb(209, 193, 191);
          cursor: default;
        }
      }
      .mv_container_paiHang_contact {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .mv_container_paiHang_contact_inside_two {
          border-bottom: 1px solid #e6e0e0;
          border-right: 1px solid #e6e0e0;
        }
        .mv_container_paiHang_contact_inside_one {
          border-bottom: 1px solid #e6e0e0;
        }
        .mv_container_paiHang_contact_inside {
          width: 49%;
          margin-bottom: 15px;
          display: flex;
          height: 120px;
          align-items: center;
          cursor: pointer;
          .mv_container_paiHang_contact_inside_left {
            width: 12%;
            height: 100%;
            //background: orange;
            @include flex;
            font-size: 25px;
            color: #909399;
          }
          .mv_container_paiHang_contact_inside_middle {
            width: 50%;
            height: 90%;
            background: green;
            .el-image {
              border-radius: 5px;
              width: 100%;
              height: 100%;
            }
            .hot_number {
              position: relative;
              font-size: 13px;
              display: flex;
              bottom: 110px;
              color: rgb(214, 214, 214);
            }
          }
          .mv_container_paiHang_contact_inside_right {
            width: 35%;
            height: 80%;
            //background: violet;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            .mv_container_paiHang_contact_inside_right_title {
              width: 85%;
              //background: cornflowerblue;
              @include white_space;
              font-weight: 300;
            }
            .mv_container_paiHang_contact_inside_right_art {
              width: 85%;
              font-size: 14px;
              color: #909399;
              font-weight: 300;
            }
          }
        }
      }
    }
  }
}
</style
>>
